<!--
 * @Author: DeluxePig 250293786@qq.com
 * @Date: 2024-06-05 23:17:14
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-08-04 22:40:32
 * @FilePath: \easy-talk\src\views\home\index.vue
 * @Description: 主页中间
-->
<template>
  <div class="user-middle-box">
    <div v-for="item in propertylist" :key="item.name" class="list-box" :class="'list-box' + item.id">
      <div class="list-title">
        <div class="title">{{ item.title }}</div>
        <div class="pay-btn" @click="runTo(item.url, item)">去充值</div>
      </div>
      <div class="list-cont">
        <div class="cont-title">{{ item.tips }}</div>
        <div class="cont-val">{{ item.value }} <span class="unit">{{ item.unit }}</span></div>
      </div>
      <div v-if="item.usedVal !== null" class="list-progress">
        <el-progress :color="item.color" :show-text="false" :stroke-width="8" :percentage="item.percentage" />
      </div>
      <div v-if="item.usedVal !== null" class="list-used">
        已使用{{ item.usedVal }} {{ item.unit }}
      </div>
    </div>
  </div>
</template>

<script>
import { getProperty } from '@/api/user'
export default {
  name: 'HomeMiddle',
  data() {
    return {
      propertylist: [
        { title: '空间状况', tips: '空间余额', value: '--', unit: 'GB', usedVal: '', id: '1', url: '/account-info/order-pay', index: 0 },
        { title: '流量状况', tips: '流量余额', value: '--', unit: 'GB', usedVal: '', id: '2', url: '/account-info/order-pay', index: 1 },
        { title: '时长状况', tips: '时长余额', value: '--', unit: '秒', usedVal: '', id: '3', url: '/account-info/order-pay', index: 2 },
        { title: 'E币状况', tips: 'E币余额', value: '--', unit: '个', usedVal: '', id: '4', url: '/account-info/order-pay', index: 3 }
      ]
    }
  },
  computed: {},
  created() {
    this.getPropertyData()
  },
  methods: {
    getPropertyData() {
      getProperty().then((res) => {
        const size = this.bytesTosize(res.data.data_traffic_size)
        const disk_size = this.bytesTosize(res.data.disk_size)
        const use_disk_size = this.bytesTosize(res.data.use_disk_size)
        this.propertylist = [
          { title: '空间状况', tips: '空间余额', value: disk_size.size, unit: disk_size.unit, usedVal: use_disk_size.size, id: '1', color: '#39D9C6', percentage: res.data.use_disk_percent, url: '/account-info/order-pay', index: 0 },
          { title: '流量状况', tips: '流量余额', value: size.size, unit: size.unit, usedVal: null, id: '2', color: '#2893FF', percentage: 10, url: '/account-info/order-pay', index: 1 },
          { title: '时长状况', tips: '时长余额', value: res.data.video_render_duration, unit: '秒', usedVal: null, id: '3', color: '#FFCBD1', percentage: 10, url: '/account-info/order-pay', index: 2 },
          { title: 'E币状况', tips: 'E币余额', value: res.data.cash_price, unit: '个', usedVal: null, id: '4', color: '#FFA202', percentage: 10, url: '/account-info/order-pay', index: 3 }
        ]
      })
    },
    bytesTosize(bytes) {
      if (bytes === 0 || bytes === '') {
        return {
          size: 0,
          unit: 'B'
        }
      }
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      // return (bytes / Math.pow(k, i)) + ' ' + sizes[i]
      return {
        size: (bytes / Math.pow(k, i)).toFixed(2),
        unit: sizes[i]
      }
    },
    runTo(url, item) {
      this.$router.push({ path: url, query: { orderId: null, index: item.index } })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-middle-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .list-box {
    width: calc(25% - 20px);
    height: 180px;
    position: relative;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    background: linear-gradient(90deg, #fff 0%, #C7F6E6 100%);

    .list-title {
      width: 100%;
      font-weight: 600;
      font-size: 20px;
      color: #1C1F23;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 12px;

      .title {
        font-weight: 600;
        font-size: 20px;
        color: #1C1F23;
        line-height: 23px;
      }

      .pay-btn {
        width: 74px;
        height: 30px;
        line-height: 30px;
        background: linear-gradient(90deg, #39D9C6 0%, #39CFA2 100%);
        border-radius: 4px 4px 4px 4px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        cursor: pointer;
      }
    }

    .list-cont {
      width: 100%;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 500;
      font-size: 16px;
      color: #1C1F23;
      margin: 10px 0;

      .cont-val {
        font-weight: 600;
        font-size: 24px;

        .unit {
          font-size: 14px;
        }
      }
    }

    .list-progress {
      margin: 8px 0;
    }

    .list-used {
      font-weight: 400;
      font-size: 12px;
      color: #6A6B6C;
      line-height: 14px;
      text-align: left;
      margin-top: 10px;
    }
  }

  .list-box2 {
    background: linear-gradient(90deg, #fff 0%, #CFE6FF 100%);
  }

  .list-box3 {
    background: linear-gradient(90deg, #fff 0%, #FFCBD1 100%);
  }

  .list-box4 {
    background: linear-gradient(90deg, #fff 0%, #FFD7B1 100%);
  }
}
</style>
